<template>
  <div id="detailNavBar">
    <nav-bar>
       <div slot="left" class="back" @click="backClick">
            <img src="~assets/img/common/back.svg" alt="" >
       </div>

      <div slot="center" class="title">
          <div v-for="(i,index) in titles" :key="index" class="title-item"
          :class="{active: index==currentIndex} "
          @click="titleClick(index)"
          >{{i}}</div>
      </div>
    </nav-bar>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar.vue";
export default {
  name: "detailNavBar",
  data() {
    return {
        titles: ["商品","参数","评论","推荐"],
        currentIndex: 0,
    };
  },
  methods: {
      titleClick(index){
          this.currentIndex=index;
          this.$emit('titleClick', index);
      },

      //返回
      backClick(){
          this.$router.back();
      }
  },
  components: {
    NavBar,
  },
};
</script>

<style scoped>
  .title{
      display: flex;
      padding-top: 5px;
  }

  .title-item{
      flex:1;
  }

  .active{
      color: var(--color-high-text);
      
  }

  .back{
      box-sizing: border-box;
      padding-top: 8px;
  }

  .back img{
      width: 18px;
      height: 18px;
  }
  
</style>